<template>
  <div>
    <div>
      <van-nav-bar
title="精品汇-厂家精品汇聚平台"
fixed
      />
    </div>

      <van-tabs @change="changeTab" v-model="activeKey" >
        <van-tab v-for="index in platformProductCategory" :title="index.name" :key="index.categoryId"  >
          <div v-for="item in shareInfoList" :key="item.shareid">
            <div class="container">
              <div class="columnr" >
                <div class="rownr">
                  <div class="img">
                    <van-image
                      round
                      width="40px"
                      height="40px"
                      :src="item.logo?item.logo:'https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/touxiang.png'"
                    />
                  </div>
                  <div class="name">{{item.agencyname?item.agencyname:item.companyName}}</div>
                </div>

                <div class="content"  @click="viewdetail(item)" v-if="item.agencyid">
                  <p>
                    {{item.content}}
                  </p>
                </div>
                <div  class="content"  @click="viewdetail(item)"  v-html="item.content" v-else>

                </div>

                <div class="active-prizelist"   @click="viewdetail(item)" >
                  <ul class="active-ul">
                    <li class="viewimg" v-for="img in item.images">
                        <van-image
                          width="100%"
                          height="100"
                          :src="img"
                        />
                    </li>
                  </ul>

                </div>
                <div style="padding-top:10px;padding-bottom: 10px;padding-left:20px;color:#B2B2B2;font-size: 14px;">
                  {{ item.fbsj }}
                </div>

              </div>
              <div class="rownr">
                <div style="width: 25%;align-content: center;padding-left: 8%;font-size: 14px;" >
                  <van-icon name="eye-o"  /> 阅 {{item.readnum !=null ?item.readnum : 0 }}
                </div>
                <div style="width: 25%;align-content: center;padding-left: 8%;font-size: 14px;" @click="doShouCang(item)">
                  <van-icon name="star-o" :color="item.scyxbz == '1' ?'#FFB929':''"/> 收藏
                </div >
                <div style="width: 25%;align-content: center;padding-left: 8%;font-size: 14px;" @click="viewdetail(item)">
                  <van-icon name="chat-o" /> 回复
                </div>
                <div style="width: 25%;align-content: center;padding-left: 8%;font-size: 14px;" @click="doDianZan(item)">
                  <van-icon name="good-job-o" :color="item.dzyxbz == '1' ?'#FFB929':''" /> 点赞
                </div>
              </div>

            </div>
          </div>
        </van-tab>
      </van-tabs>

      <div class="floating-button">
        <div style="font-size: 14px;color: white;" @click="toFabu" >
          发布
        </div>

      </div>
  </div>
</template>
<script>
import { queryPlatformProductCategory, queryProductInfo, queryShareInfo, addShareStoreInfo, editShareReadNum } from 'api/api'
import { dateFormat } from '../../utils/DateUtil'
import { Skeleton, Toast } from 'vant'

export default {
  name: 'Search',
  data() {
    return {
      loading: true,
      shareInfoList: [],
      platformProductCategory: [],
      productCategory: [],
      productCategoryXl: [],
      productList: [],
      activeKey: 0,
      clickXlData: { categoryId: '' },
      clickDlData: { categoryId: '' },
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        {
          url: 'https://img01.yzcdn.cn/vant/sand.jpg'
        },
        {
          url: 'https://img01.yzcdn.cn/vant/tree.jpg'
        }, {
          url: 'https://img01.yzcdn.cn/vant/tree.jpg'
        }, {
          url: 'https://img01.yzcdn.cn/vant/tree.jpg'
        }, {
          url: 'https://img01.yzcdn.cn/vant/tree.jpg'
        }
      ],
      scolor: true,
      dcolor: true,
      pageNum: 1,
      pageSize: 10
    }
  },
  created() {
    this.pageNum = 1
    const agencyId = this.$store.getters.agencyId
    this.agencyid = agencyId
    this.shareid = this.$route.query.shareid
    this.loading = false
    this.queryPlatformProductCategory()
    this.queryShareInfo()
    const that = this
    window.onscroll = function() {
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      // 滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        // 写后台加载数据的函数
        that.pageNum = that.pageNum + 1
        that.queryShareInfo()
      }
    }
  },
  methods: {

    queryPlatformProductCategory() {
      const param = {}
      queryPlatformProductCategory(param).then(response => {
        this.platformProductCategory = [{ categoryId: '', name: '全部' }, ...response.data]
      })
    },
    toProductInfo(companyId, productId) {
      this.$router.push({ path: '/product', query: { companyId: companyId, productId: productId }})
    },

    toFabu() {
      this.$router.push({ path: '/fabu', query: {}})
    },

    viewdetail(item) {
      debugger
      const shareid = item.shareid
      let readnum = item.readnum
      if (readnum) {
        readnum = parseInt(readnum) + 1
      } else {
        readnum = 1
      }
      const param = { shareid: shareid, readnum: readnum }
      editShareReadNum(param).then(res => {
        if (res.code == 200) {

        }
      })
      this.$router.push({ path: '/fbinfo', query: { shareid: shareid }})
    },

    changeTab(e) {
      this.activeKey = e
      this.pageNum = 1
      this.shareInfoList = []
      const that = this
      const param = { spdl: this.platformProductCategory[e].categoryId, pageNum: that.pageNum, pageSize: that.pageSize }
      const list = []
      queryShareInfo(param).then(res => {
        if (res.code == 200) {
          console.log(res.rows)
          if (res.rows) {
            const lenth = res.rows.length
            for (var i = 0; i < lenth; i++) {
              if (res.rows[i].images) {
                res.rows[i].images = res.rows[i].images.split(',')
              }
              res.rows[i].fbsj = res.rows[i].fbsj.replace('T', ' ').replace('.000+0800', ' ')
              list.push(res.rows[i])
            }
          }
          this.shareInfoList = that.pageNum == 1 ? list : that.shareInfoList.concat(list)
        }
      })
    },

    queryShareInfo() {
      const param = { pageNum: this.pageNum, pageSize: this.pageSize }
      const list = []
      const that = this
      console.log(param)
      queryShareInfo(param).then(res => {
        if (res.code == 200) {
          console.log(res.rows)
          if (res.rows) {
            const lenth = res.rows.length
            for (var i = 0; i < lenth; i++) {
              if (res.rows[i].images) {
                res.rows[i].images = res.rows[i].images.split(',')
              }
              res.rows[i].fbsj = res.rows[i].fbsj.replace('T', ' ').replace('.000+0800', ' ')
              list.push(res.rows[i])
            }
          }
          that.shareInfoList = that.pageNum == 1 ? list : that.shareInfoList.concat(list)
        }
      })
    },

    doShouCang(item) {
      const agencyid = this.agencyid
      const shareid = item.shareid
      console.log(item)
      if (item.scyxbz == '1') {
        item.scyxbz = '0'
        const param = { agencyid: agencyid, shareid: shareid, scyxbz: '0' }
        addShareStoreInfo(param).then(res => {
          if (res.code == 200) {
            Toast.success('取消收藏')
          }
        })
      } else {
        item.scyxbz = '1'
        const param = { agencyid: agencyid, shareid: shareid, scyxbz: '1' }
        addShareStoreInfo(param).then(res => {
          if (res.code == 200) {
            Toast.success('收藏成功')
          }
        })
      }
    },

    doDianZan(item) {
      const agencyid = this.agencyid
      const shareid = item.shareid

      if (item.dzyxbz == '1') {
        item.dzyxbz = '0'
        const param = { agencyid: agencyid, shareid: shareid, dzyxbz: '0' }
        addShareStoreInfo(param).then(res => {
          if (res.code == 200) {
          }
        })
      } else {
        item.dzyxbz = '1'
        const param = { agencyid: agencyid, shareid: shareid, dzyxbz: '1' }
        addShareStoreInfo(param).then(res => {
          if (res.code == 200) {
          }
        })
      }
    }

  }
}
</script>

<style scoped>

  .innerBox{
    overflow-y: scroll;
  }
  .cpbg{
    display: flex;
    padding:5px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .columnr{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .name{
    padding-top: 13px;
    padding-left: 10px;
    font-size: 20px;
    color: #466BAC;
  }

  .img{
    padding-top: 10px;
    padding-left: 10px;
  }

  .container{
    background-color: #ffffff;
    margin-top: 5px;
    width: 100%;
    height: auto;
    padding-bottom: 10px;
  }

  .content{
    font-size: 16px;
    padding:10px;
    text-indent: 2em;
  }

  .viewimg{
    width: 31%;
    padding-left: 5px;
    padding-right: 5px;
  }

  .floating-button {
    position: fixed;
    right: 50px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#FF6900;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 14px;
  }

  .active-prizelist .active-ul{
    width: 100%;
    height: 100px;
    display: inline;
    white-space: nowrap;
    overflow-x:scroll;
    float:left;
    overflow-y:hidden;
    background-color: white;
  }

  .active-prizelist .active-ul::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .active-prizelist .active-ul li{
    display:inline-block;
    margin:0;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

</style>
